<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width-device-width, initial-scale-l" />
    <title>Motor Drive</title>
    <link rel="stylesheet" href="Content/jquery.mobile-1.4.2.css" />
    <script src="Scripts/jquery-1.8.3.js"></script>
    <script src="Scripts/jquery.mobile-1.4.2.js"></script>
    <script>
        
        var ws = new WebSocket('ws://10.0.201.212:8888/');
        
        function change_sliders() {
            ws.send(x_speed.value + " " + y_speed.value + " " + rotate.value);
        }
        
        function push_stop() {
            x_speed.value = 0;
            y_speed.value = 0;
            rotate.value = 0;
            ws.send(x_speed.value + " " + y_speed.value + " " + rotate.value);
            $("#x_speed").slider("refresh");
            $("#y_speed").slider("refresh");
            $("#rotate").slider("refresh");
        }
        
        // id="page1"の属性が設定されたページが表示された時に実行する。
        $("#page1").live("pageshow", function(event) {
            
            // スライダ x_speed の値が変更された時のハンドラ定義。  
            $("#x_speed").bind("change", change_sliders);
            
            // スライダ y_speed の値が変更された時のハンドラ定義。  
            $("#y_speed").bind("change", change_sliders);
            
            // スライダ rotate の値が変更された時のハンドラ定義。  
            $("#rotate").bind("change", change_sliders);
            
            // ボタンプッシュのハンドラ定義。
            $("#stop_btn").bind("click", push_stop);
        });
    </script>
</head>
<body>
    <div data-role="page" id="page1" data-theme="a" >
        <div>
            <img src="http://10.0.201.212:8081/?action=stream" />
        <div>
        <p></p>
        <div id="x_slider">
            <label for="x_speed">X方向:</label>
            <input id="x_speed" name="x_speed" type="range" min="-100" max="100" step="10" value="0" />
        </div>
        <p></p>
        <div id="y_slider">
            <label for="y_speed">Y方向:</label>
            <input id="y_speed" name="y_speed" type="range" min="-100" max="100" step="10" value="0" />
        </div>
        <p></p>
        <dev id="z_slider">
            <label for="rotate">回転:</label>
            <input id="rotate" name="rotate" type="range" min="-100" max="100" step="10" value="0" />
        </dev>
        <p style="text-align: center"><input id="stop_btn" name="stop_btn" type="button" value="停止" /></p>
    </div>
</body>
</html>
